<template>
  <div class="chat-content">
    <div class="header border-bottom">
      <div>小智</div>
      <div>永久在线</div>
    </div>
    <!-- recordContent 聊天记录数组 -->
    <div v-for="(itemc, indexc) in recordContent" :key="indexc">
      <!-- 对方 -->
      <div class="word" v-if="!itemc.mineMsg">
        <img :src="itemc.headUrl">
        <div class="info">
          <div class="info-content">{{itemc.contactText}}</div>
        </div>
      </div>
      <!-- 我的 -->
      <div class="word-my" v-else>
        <div class="info">
          <div class="info-content">{{itemc.contactText}}</div>
        </div>
        <img :src="itemc.headUrl">
      </div>
    </div>
    <div class="send-box">
      <input type="text">
      <button>提交</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data: function () {
    return {
      recordContent: [
        {'nickName': '江小白', 'contactText': '您好，我想问一下，包装工程毕业生毕业后从事的工作岗位有那些啊？', 'timestamp': '2019/09/09', 'headUrl': 'static/avator02.jpg', 'mineMsg': true},
        {'nickName': '江小丽', 'contactText': '这个嘛，先给钱', 'timestamp': '2019/09/09', 'headUrl': 'static/avator.jpg'},
        {'nickName': '江小白', 'contactText': '你先回答我', 'timestamp': '2019/09/09', 'headUrl': 'static/avator02.jpg', 'mineMsg': true},
        {'nickName': '江小丽', 'contactText': '不会吧，不会吧，不会真的有人没有钱吧！', 'timestamp': '2019/09/09', 'headUrl': 'static/avator.jpg'},
        {'nickName': '江小白', 'contactText': '你走吧！不是很想理你。', 'timestamp': '2019/09/09', 'headUrl': 'static/avator02.jpg', 'mineMsg': true},
        {'nickName': '江小丽', 'contactText': '不想鸟你，不想鸟你，不想鸟你，不想鸟你，不想鸟你不想鸟你不想鸟你', 'timestamp': '2019/09/09', 'headUrl': 'static/avator.jpg'}
      ]
    }
  },
  methods: {
    chatTime: function (time) {
      return time
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="stylus">
@import '~@/assets/stylus/varibles.styl'
.chat-content{
  width: 100%;
  height: 100%;
  overflow hidden;
  background-color $bgColor
  .header{
    height .7rem
    text-align center
    line-height .5rem
    padding 0.1rem 0
    font-size .34rem
    &>div:last-child{
      transform scale(0.5)
      padding 0
      position relative
      top -.15rem
    }
  }
  .word{
    width: 100%;
    display: flex;
    margin: 0.2rem 0 0.1rem;
    padding-left .2rem;
    padding-right 1.15rem;
    box-sizing  border-box
    & > img{
      width: .8rem;
      height: .8rem;
      border-radius: .1rem;
    }
    .info{
      width: 100%;
      line-height .5rem;
      .info-content{
        float: left;
        max-width: 100%;
        padding: .12rem 0.17rem;
        margin-left: .2rem;
        font-size: .32rem;
        text-align: left;
        background: #fff;
        position: relative;
        border-radius .1rem;
      }
      //小三角形
      .info-content::before{
        position: absolute;
        left: -.15rem;
        top: .15rem;
        content: '';
        border-right: .2rem solid #FFF;
        border-top: .16rem solid transparent;
        border-bottom: .16rem solid transparent;
      }
    }
  }
.word-my{
  margin: .2rem 0 .1rem;
  display: flex;
  justify-content:flex-end;
  width 100%;
  padding-right .2rem;
  padding-left 1.15rem;
  box-sizing border-box;
  & > img{
    width: .8rem;
    height: .8rem;
    border-radius: .1rem;
    }
    .info{
      width: 100%;
      line-height .5rem;
      .info-content{
        float: right;
        max-width: 100%;
        padding: .12rem 0.17rem;
        margin-right: .2rem;
        font-size: .32rem;
        position: relative;
        background: #A3C3F6;
        text-align: left;
        border-radius .1rem;
      }
      //小三角形
      .info-content::after{
        position: absolute;
        right: -.15rem;
        top:  .15rem;
        content: '';
        border-left: .2rem solid #A3C3F6;
        border-top: .16rem solid transparent;
        border-bottom: .16rem solid transparent;
      }
    }
  }
  .send-box{
    position absolute
    bottom 1rem
    display flex
    width 100%
    line-height .5rem
    padding-bottom .1rem
    &>input{
      font-size .32rem
      color #bbb
      width 100%
      line-height .5rem
      box-sizing border-box
      padding .05rem 0.1rem 0.05rem .6rem
      border-radius .5rem
      background-color #fff
      margin 0 .2rem
    }
    &>button{
      width 1.2rem
      margin-right .2rem
      background-color #e4f2ff
      border-radius .14rem
      padding 0 .1rem
    }
  }
}
</style>
